<template>
  <div class="tutorial-page">
    <div class="tutorial-header">
      <h1>Element Plus 组件库</h1>
      <p>掌握使用 Element Plus 构建美观的 Vue 3 应用</p>
    </div>

    <div class="tutorial-content">
      <div class="section">
        <h2>Element Plus 简介</h2>
        <p>Element Plus 是专为 Vue 3 设计的桌面端组件库，提供了丰富的组件来帮助开发者快速构建现代化的 Web 应用。</p>
        
        <h3>特性</h3>
        <ul>
          <li>专为 Vue 3 设计，使用 TypeScript 开发</li>
          <li>丰富的组件库，包括表单、表格、导航、数据展示等</li>
          <li>支持国际化</li>
          <li>完善的主题定制能力</li>
          <li>详细的文档和示例</li>
          <li>支持按需引入</li>
        </ul>
      </div>

      <div class="section">
        <h2>安装和配置</h2>
        
        <h3>安装 Element Plus</h3>
        <pre><code class="language-bash"># 使用 npm
npm install element-plus

# 使用 yarn
yarn add element-plus</code></pre>
        
        <h3>完整引入</h3>
        <pre><code class="language-javascript">// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')</code></pre>
        
        <h3>按需引入</h3>
        <p>借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。</p>
        
        <p>首先，安装 babel-plugin-import：</p>
        <pre><code class="language-bash">npm install babel-plugin-import -D</code></pre>
        
        <p>然后修改 babel.config.js：</p>
        <pre><code class="language-javascript">module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "element-plus",
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/lib/theme-chalk/${name}.css`
        },
      },
    ],
  ],
}</code></pre>
        
        <p>在 main.js 中按需引入组件：</p>
        <pre><code class="language-javascript">// main.js
import { createApp } from 'vue'
import { ElButton } from 'element-plus'
import App from './App.vue'

const app = createApp(App)

app.component(ElButton.name, ElButton)
// 或者
// app.use(ElButton)

app.mount('#app')</code></pre>
        
        <h3>Vite 项目中按需引入</h3>
        <p>在 Vite 项目中，可以使用 unplugin-vue-components 和 unplugin-auto-import 来实现自动按需引入：</p>
        
        <pre><code class="language-bash"># 安装插件
npm install -D unplugin-vue-components unplugin-auto-import</code></pre>
        
        <p>修改 vite.config.js：</p>
        <pre><code class="language-javascript">import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})</code></pre>
      </div>

      <div class="section">
        <h2>常用组件</h2>
        
        <h3>布局组件</h3>
        <div class="component-demo">
          <h4>Layout 布局</h4>
          <pre><code class="language-html">&lt;el-container&gt;
  &lt;el-header&gt;Header&lt;/el-header&gt;
  &lt;el-container&gt;
    &lt;el-aside width="200px"&gt;Aside&lt;/el-aside&gt;
    &lt;el-main&gt;Main&lt;/el-main&gt;
  &lt;/el-container&gt;
  &lt;el-footer&gt;Footer&lt;/el-footer&gt;
&lt;/el-container&gt;</code></pre>
        </div>
        
        <h3>表单组件</h3>
        <div class="component-demo">
          <h4>Input 输入框</h4>
          <pre><code class="language-html">&lt;el-input v-model="input" placeholder="请输入内容"&gt;&lt;/el-input&gt;</code></pre>
          
          <h4>Select 选择器</h4>
          <pre><code class="language-html">&lt;el-select v-model="value" placeholder="请选择"&gt;
  &lt;el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"&gt;
  &lt;/el-option&gt;
&lt;/el-select&gt;</code></pre>
          
          <h4>Date Picker 日期选择器</h4>
          <pre><code class="language-html">&lt;el-date-picker
  v-model="date"
  type="date"
  placeholder="选择日期"&gt;
&lt;/el-date-picker&gt;</code></pre>
        </div>
        
        <h3>数据展示组件</h3>
        <div class="component-demo">
          <h4>Table 表格</h4>
          <pre><code class="language-html">&lt;el-table :data="tableData" style="width: 100%"&gt;
  &lt;el-table-column prop="date" label="日期" width="180"&gt;&lt;/el-table-column&gt;
  &lt;el-table-column prop="name" label="姓名" width="180"&gt;&lt;/el-table-column&gt;
  &lt;el-table-column prop="address" label="地址"&gt;&lt;/el-table-column&gt;
&lt;/el-table&gt;</code></pre>
          
          <h4>Pagination 分页</h4>
          <pre><code class="language-html">&lt;el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"&gt;
&lt;/el-pagination&gt;</code></pre>
        </div>
        
        <h3>反馈组件</h3>
        <div class="component-demo">
          <h4>Message 消息提示</h4>
          <pre><code class="language-javascript">import { ElMessage } from 'element-plus'

ElMessage('这是一条消息提示')
ElMessage({
  message: '恭喜你，这是一条成功消息',
  type: 'success',
})</code></pre>
          
          <h4>MessageBox 弹框</h4>
          <pre><code class="language-javascript">import { ElMessageBox } from 'element-plus'

ElMessageBox.confirm(
  '此操作将永久删除该文件, 是否继续?',
  '提示',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功!',
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })</code></pre>
        </div>
      </div>

      <div class="section">
        <h2>表单组件详解</h2>
        
        <h3>Form 表单</h3>
        <pre><code class="language-html">&lt;el-form 
  :model="ruleForm" 
  :rules="rules" 
  ref="formRef" 
  label-width="100px" 
  class="demo-ruleForm"&gt;
  &lt;el-form-item label="活动名称" prop="name"&gt;
    &lt;el-input v-model="ruleForm.name"&gt;&lt;/el-input&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="活动区域" prop="region"&gt;
    &lt;el-select v-model="ruleForm.region" placeholder="请选择活动区域"&gt;
      &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt;
      &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt;
    &lt;/el-select&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="活动时间" required&gt;
    &lt;el-col :span="11"&gt;
      &lt;el-form-item prop="date1"&gt;
        &lt;el-date-picker 
          type="date" 
          placeholder="选择日期" 
          v-model="ruleForm.date1" 
          style="width: 100%;"&gt;
        &lt;/el-date-picker&gt;
      &lt;/el-form-item&gt;
    &lt;/el-col&gt;
    &lt;el-col class="line" :span="2"&gt;-&lt;/el-col&gt;
    &lt;el-col :span="11"&gt;
      &lt;el-form-item prop="date2"&gt;
        &lt;el-time-picker 
          placeholder="选择时间" 
          v-model="ruleForm.date2" 
          style="width: 100%;"&gt;
        &lt;/el-time-picker&gt;
      &lt;/el-form-item&gt;
    &lt;/el-col&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="即时配送" prop="delivery"&gt;
    &lt;el-switch v-model="ruleForm.delivery"&gt;&lt;/el-switch&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="活动性质" prop="type"&gt;
    &lt;el-checkbox-group v-model="ruleForm.type"&gt;
      &lt;el-checkbox label="美食/餐厅线上活动" name="type"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="地推活动" name="type"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="线下主题活动" name="type"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="单纯品牌曝光" name="type"&gt;&lt;/el-checkbox&gt;
    &lt;/el-checkbox-group&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="特殊资源" prop="resource"&gt;
    &lt;el-radio-group v-model="ruleForm.resource"&gt;
      &lt;el-radio label="线上品牌商赞助"&gt;&lt;/el-radio&gt;
      &lt;el-radio label="线下场地免费"&gt;&lt;/el-radio&gt;
    &lt;/el-radio-group&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item label="活动形式" prop="desc"&gt;
    &lt;el-input type="textarea" v-model="ruleForm.desc"&gt;&lt;/el-input&gt;
  &lt;/el-form-item&gt;
  &lt;el-form-item&gt;
    &lt;el-button type="primary" @click="submitForm('formRef')"&gt;立即创建&lt;/el-button&gt;
    &lt;el-button @click="resetForm('formRef')"&gt;重置&lt;/el-button&gt;
  &lt;/el-form-item&gt;
&lt;/el-form&gt;</code></pre>
        
        <pre><code class="language-javascript">import { reactive, ref } from 'vue'

export default {
  setup() {
    const formRef = ref()
    
    const ruleForm = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ],
      region: [
        { required: true, message: '请选择活动区域', trigger: 'change' }
      ],
      date1: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      ],
      date2: [
        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      ],
      type: [
        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      ],
      resource: [
        { required: true, message: '请选择活动资源', trigger: 'change' }
      ],
      desc: [
        { required: true, message: '请填写活动形式', trigger: 'blur' }
      ]
    }
    
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    
    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }
    
    return {
      formRef,
      ruleForm,
      rules,
      submitForm,
      resetForm
    }
  }
}</code></pre>
      </div>

      <div class="section">
        <h2>自定义主题</h2>
        <p>Element Plus 提供了多种方式来定制主题。</p>
        
        <h3>通过 SCSS 变量定制主题</h3>
        <pre><code class="language-scss">// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
@use "element-plus/theme-chalk/src/index.scss" as *;</code></pre>
        
        <p>然后在 main.js 中引入：</p>
        <pre><code class="language-javascript">// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入自定义主题
import './styles/element/index.scss'
// 忘记引入 Element Plus 的样式
import ElementPlus from 'element-plus'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')</code></pre>
        
        <h3>通过 CSS 变量定制主题</h3>
        <pre><code class="language-css">:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-font-size-base: 14px;
  --el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}</code></pre>
      </div>

      <div class="section">
        <h2>国际化</h2>
        <p>Element Plus 提供了内置的国际化支持。</p>
        
        <pre><code class="language-javascript">// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
// 引入英文语言包
import en from 'element-plus/es/locale/lang/en'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
  locale: en,
})
app.mount('#app')</code></pre>
        
        <h3>切换语言</h3>
        <pre><code class="language-javascript">import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

export default {
  components: {
    ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    }
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === zhCn ? en : zhCn
    }
  }
}</code></pre>
        
        <pre><code class="language-html">&lt;el-config-provider :locale="locale"&gt;
  &lt;el-button @click="toggleLocale"&gt;切换语言&lt;/el-button&gt;
  &lt;el-table :data="tableData"&gt;
    &lt;el-table-column prop="date" label="Date" width="180" /&gt;
    &lt;el-table-column prop="name" label="Name" width="180" /&gt;
    &lt;el-table-column prop="address" label="Address" /&gt;
  &lt;/el-table&gt;
&lt;/el-config-provider&gt;</code></pre>
      </div>

      <div class="section">
        <h2>在 Vue 3 组合式 API 中使用</h2>
        <pre><code class="language-javascript">import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  setup() {
    const tableData = ref([])
    const loading = ref(false)
    
    const fetchData = async () => {
      loading.value = true
      try {
        // 模拟 API 调用
        const data = await api.getUsers()
        tableData.value = data
      } catch (error) {
        ElMessage.error('获取数据失败')
      } finally {
        loading.value = false
      }
    }
    
    const handleDelete = (id) => {
      ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 删除操作
        api.deleteUser(id).then(() => {
          ElMessage.success('删除成功!')
          fetchData() // 重新加载数据
        })
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
    }
    
    onMounted(() => {
      fetchData()
    })
    
    return {
      tableData,
      loading,
      handleDelete
    }
  }
}</code></pre>
      </div>

      <div class="section">
        <h2>最佳实践</h2>
        
        <h3>表单验证</h3>
        <ul>
          <li>使用 rules 属性定义验证规则</li>
          <li>结合 async-validator 进行复杂验证</li>
          <li>在提交前调用 validate 方法进行验证</li>
        </ul>
        
        <h3>性能优化</h3>
        <ul>
          <li>使用按需引入减少打包体积</li>
          <li>合理使用虚拟滚动处理大量数据</li>
          <li>避免在循环中使用复杂的组件</li>
        </ul>
        
        <h3>用户体验</h3>
        <ul>
          <li>使用合适的反馈组件（Message、Notification、MessageBox）</li>
          <li>合理使用加载状态（Loading）</li>
          <li>提供清晰的错误提示</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
// 页面逻辑可以在这里添加
</script>

<style scoped>
@import '@/assets/tutorial-styles.css';

.component-demo {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.component-demo h4 {
  margin-top: 0;
  color: #303133;
}
</style>